@import 'mapbox-gl/src/css/mapbox-gl.css';

.mini-tokyo-3d {
	width: 380px;
	height: 380px;
	margin: 0;
	padding: 0;
	position: relative;
	font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
	cursor: default;
	-webkit-touch-callout: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	touch-action: none;
}
.mini-tokyo-3d #map {
	width: 100%;
	height: 100%;
	position: relative;
}
.mini-tokyo-3d .loader-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 21px;
	transform: translate(-50%, -50%);
	padding: 20px;
	border-radius: 10px;
	background-color: #eee;
	opacity: .9;
	transition: opacity 1s linear;
	box-sizing: initial;
}
.mini-tokyo-3d .ball-pulse > div {
	background-color: #777;
}
.mini-tokyo-3d #loading-error {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 21px;
	transform: translate(-50%, -50%);
	padding: 20px;
	border-radius: 10px;
	color: #333;
	background-color: #eee;
	opacity: .9;
	display: none;
}
.mini-tokyo-3d #clock {
	position: absolute;
	z-index: 1;
	top: 10px;
	left: 10px;
	padding: 10px;
	border-radius: 3px;
	background-color: rgba(0, 0, 0, 0.7);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	color: #fff;
	display: none;
}
.mini-tokyo-3d #time {
	font-size: 150%;
}
.mini-tokyo-3d .clock-controller {
	width: 100%;
	margin-top: 4px;
	margin-bottom: 10px;
	display: table;
	font-size: 150%;
}
.mini-tokyo-3d .clock-controller > span {
	vertical-align: middle;
	text-align: center;
	display: table-cell;
}
.mini-tokyo-3d .clock-controller-separator {
	width: 10px;
}
.mini-tokyo-3d .spin-box {
	width: 30px;
	border-radius: 4px;
	box-shadow:0 0 0 1px #777;
}
.mini-tokyo-3d .spin-box:first-child {
	width: 52px;
}
.mini-tokyo-3d .spin-box > div {
	width: 100%;
	height: 30px;
	line-height: 30px;
	text-align: center;
}
.mini-tokyo-3d .spin-box > div:first-child {
	border-bottom: solid 1px #777;
}
.mini-tokyo-3d .spin-box > div:last-child {
	border-top: solid 1px #777;
}
.mini-tokyo-3d .spin-box button {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	color: #fff;
	background-color: transparent;
	cursor: pointer;
}
.mini-tokyo-3d .spin-box .top-button {
	border-radius: 4px 4px 0 0;
}
.mini-tokyo-3d .spin-box .bottom-button {
	border-radius: 0 0 4px 4px;
}
.mini-tokyo-3d .clock-button {
	width: 100%;
	margin-top: 4px;
	margin-bottom: 10px;
	display: table;
}
.mini-tokyo-3d .clock-button > span {
	height: 30px;
	vertical-align: middle;
	text-align: center;
	display: table-cell;
}
.mini-tokyo-3d .clock-button button {
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 4px;
	box-shadow:0 0 0 1px #777;
	color: #fff;
	background-color: transparent;
	cursor: pointer;
}
.mini-tokyo-3d .speed-controller {
	width: 100%;
	margin-top: 4;
	display: table;
	border-radius: 4px;
	box-shadow:0 0 0 1px #777;
}
.mini-tokyo-3d .speed-controller > span {
	height: 30px;
	vertical-align: middle;
	text-align: center;
	display: table-cell;
}
.mini-tokyo-3d .speed-controller > span:first-child {
	width: 30px;
	border-right: solid 1px #777;
}
.mini-tokyo-3d .speed-controller > span:last-child {
	width: 30px;
	border-left: solid 1px #777;
}
.mini-tokyo-3d .speed-controller button {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	color: #fff;
	background-color: transparent;
	cursor: pointer;
}
.mini-tokyo-3d .speed-controller .left-button {
	border-radius: 4px 0 0 4px;
}
.mini-tokyo-3d .speed-controller .right-button {
	border-radius: 0 4px 4px 0;
}
.mini-tokyo-3d .decrease-icon {
	display: block;
	width: 100%;
	height: 12px;
	background: no-repeat center/12px svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/minus.svg', fill: #fff);
}
.mini-tokyo-3d button:disabled .decrease-icon {
	background-image: svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/minus.svg', fill: #7f7f7f);
}
.mini-tokyo-3d #clock button:disabled {
	color: #777;
}
.mini-tokyo-3d #clock button:not(:disabled):hover {
	background-color: rgba(51, 51, 51, 0.7);
}
.mini-tokyo-3d .increase-icon {
	display: block;
	width: 100%;
	height: 12px;
	background: no-repeat center/12px svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/plus.svg', fill: #fff);
}
.mini-tokyo-3d button:disabled .increase-icon {
	background-image: svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/plus.svg', fill: #7f7f7f);
}
.mini-tokyo-3d #clock-speed {
	padding: 0 6px;
}
.mini-tokyo-3d #timetable {
	position: absolute;
	z-index: 3;
	bottom: 0;
	left: 0;
	right: 0;
	width: calc(100% - 20px);
	max-width: 380px;
	height: 33%;
	margin: auto;
	border-radius: 3px 3px 0 0;
	background-color: rgba(0, 0, 0, 0.7);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	display: none;
	font-size: 130%;
	color: #fff;
	transition: height 300ms ease;
}
.mini-tokyo-3d #timetable-header {
	height: 48px;
	margin: 10px 0;
	padding: 0 10px;
	overflow: hidden;
	line-height: 150%;
	cursor: pointer;
}
.mini-tokyo-3d #timetable-body {
	height: calc(100% - 68px);
	margin: 10px 0;
	padding: 0 10px;
	overflow: auto;
	overscroll-behavior: contain;
	line-height: 130%;
}
.mini-tokyo-3d .windows {
	scrollbar-width: thin;
	scrollbar-color: #ccc transparent;
}
.mini-tokyo-3d .windows::-webkit-scrollbar {
	width: 10px;
}
.mini-tokyo-3d .windows::-webkit-scrollbar-thumb {
    background: #ccc;
    background-clip: content-box;
	border-radius: 6px;
    border: solid 2px transparent;
}
.mini-tokyo-3d .scroll-box {
	position: relative;
}
.mini-tokyo-3d #railway-mark {
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 100%;
}
.mini-tokyo-3d #train-mark {
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: calc(100% + 20px);
	margin: -10px;
}
.mini-tokyo-3d .station-row {
	margin: 4px 0;
}
.mini-tokyo-3d .station-row:hover {
	background-color: rgba(102, 102, 102, 0.7);
}
.mini-tokyo-3d .station-row > div {
	display: inline-block;
	vertical-align: middle;
}
.mini-tokyo-3d .station-title-box {
	margin-left: 30px;
	width: calc(100% - 72px);
}
.mini-tokyo-3d .station-time-box {
	width: 42px;
	text-align: right;
}
.mini-tokyo-3d #timetable-button {
	pointer-events: none;
}
.mini-tokyo-3d .slide-down {
	position: absolute;
	top: 24px;
	right: 10px;
	width: 20px;
	height: 20px;
	background: no-repeat center/13px svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/angle-down.svg', fill: #fff);
}
.mini-tokyo-3d .slide-up {
	position: absolute;
	top: 24px;
	right: 10px;
	width: 20px;
	height: 20px;
	background: no-repeat center/13px svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/angle-up.svg', fill: #fff);
}
.mini-tokyo-3d .mapboxgl-ctrl-search {
	transition: width 300ms ease;
}
.mini-tokyo-3d .mapboxgl-ctrl button.mapboxgl-ctrl-search .mapboxgl-ctrl-icon {
	background: no-repeat right 5px center/19px svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/search.svg', fill: #333);
}
.mini-tokyo-3d .mapboxgl-ctrl button.mapboxgl-ctrl-underground .mapboxgl-ctrl-icon {
	background: no-repeat center/23px svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/eye.svg', fill: #333);
}
.mini-tokyo-3d .mapboxgl-ctrl button.mapboxgl-ctrl-underground-visible .mapboxgl-ctrl-icon {
	background-image: svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/eye.svg', fill: #33B5E5);
}
.mini-tokyo-3d .mapboxgl-ctrl button.mapboxgl-ctrl-track-helicopter .mapboxgl-ctrl-icon {
	background: no-repeat center/23px svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/helicopter.svg', fill: #333);
}
.mini-tokyo-3d .mapboxgl-ctrl button.mapboxgl-ctrl-track-helicopter.mapboxgl-ctrl-track-active .mapboxgl-ctrl-icon {
	background-image: svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/helicopter.svg', fill: #33B5E5);
}
.mini-tokyo-3d .mapboxgl-ctrl button.mapboxgl-ctrl-track-train .mapboxgl-ctrl-icon {
	background: no-repeat center/19px svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/train.svg', fill: #333);
}
.mini-tokyo-3d .mapboxgl-ctrl button.mapboxgl-ctrl-track-train.mapboxgl-ctrl-track-active .mapboxgl-ctrl-icon {
	background-image: svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/train.svg', fill: #33B5E5);
}
.mini-tokyo-3d .mapboxgl-ctrl button.mapboxgl-ctrl-playback .mapboxgl-ctrl-icon {
	background: no-repeat center/21px svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/play-circle.svg', fill: #333);
}
.mini-tokyo-3d .mapboxgl-ctrl button.mapboxgl-ctrl-playback-active .mapboxgl-ctrl-icon {
	background-image: svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/play-circle.svg', fill: #33B5E5);
}
.mini-tokyo-3d .mapboxgl-ctrl button.mapboxgl-ctrl-weather .mapboxgl-ctrl-icon {
	background: no-repeat center/21px svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/cloud-showers-heavy.svg', fill: #333);
}
.mini-tokyo-3d .mapboxgl-ctrl button.mapboxgl-ctrl-weather-active .mapboxgl-ctrl-icon {
	background-image: svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/cloud-showers-heavy.svg', fill: #33B5E5);
}
.mini-tokyo-3d .mapboxgl-ctrl button.mapboxgl-ctrl-about .mapboxgl-ctrl-icon {
	background: no-repeat center/21px svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/info-circle.svg', fill: #333);
}
.mini-tokyo-3d .mapboxgl-popup-content {
	color: #fff;
	background-color: rgba(0, 0, 0, 0.7);
}
.mini-tokyo-3d .mapboxgl-popup-content a:link,
.mini-tokyo-3d .mapboxgl-popup-content a:visited {
	color: #f90;
	text-decoration: none;
}
.mini-tokyo-3d .mapboxgl-popup-content a:hover,
.mini-tokyo-3d .mapboxgl-popup-content a:active {
	color: #f90;
	text-decoration: underline;
}
.mini-tokyo-3d .mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mini-tokyo-3d .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mini-tokyo-3d .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
	border-bottom-color: rgba(0, 0, 0, 0.7);
}
.mini-tokyo-3d .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mini-tokyo-3d .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mini-tokyo-3d .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
	border-top-color: rgba(0, 0, 0, 0.7);
}
.mini-tokyo-3d .mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
	border-right-color: rgba(0, 0, 0, 0.7);
}
.mini-tokyo-3d .mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
	border-left-color: rgba(0, 0, 0, 0.7);
}
.mini-tokyo-3d #search-box {
	top: 25px;
	right: 144px;
	width: 200px;
	height: 22px;
	transform: translate(50%, -50%);
	font-size: 16px;
	border: none;
	outline: none;
	background-color: rgba(255, 255, 255, 0);
	opacity: 0;
	display: none;
	position: absolute;
	z-index: 3;
}
.mini-tokyo-3d .acd-check {
	display: none;
}
.mini-tokyo-3d .acd-label {
	background: rgba(51, 51, 51, 0.7);
	color: #fff;
	display: block;
	padding: 4px;
	cursor: pointer;
}
.mini-tokyo-3d .acd-label .acd-icon {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 4px;
	margin-bottom: -2px;
	background: no-repeat center/12px svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/plus-square.svg', fill: #fff);
}
.mini-tokyo-3d .acd-check:checked + .acd-label .acd-icon {
	background-image: svg-load('../../node_modules/@fortawesome/fontawesome-free/svgs/solid/minus-square.svg', fill: #fff);
}
.mini-tokyo-3d .acd-content {
	border: 1px solid rgba(51, 51, 51, 0.7);
	margin-bottom: 1px;
	height: 0;
	opacity: 0;
	padding: 0 4px;
	visibility: hidden;
}
.mini-tokyo-3d .acd-check:checked + .acd-label + .acd-content {
	height: auto;
	opacity: 1;
	visibility: visible;
}
.mini-tokyo-3d .desc-header {
	display: table;
}
.mini-tokyo-3d .desc-header > div {
	display: table-cell;
	vertical-align: top;
}
.mini-tokyo-3d .desc-header > div:first-child {
	width: 10px;
}
.mini-tokyo-3d .desc-header > div:last-child {
	padding-left: 8px;
}
.mini-tokyo-3d .desc-caution {
	color: #f90;
}
.mini-tokyo-3d .line-strip {
	width: 10px;
	height: 13px;
}
.mini-tokyo-3d .line-strip-long {
	width: 10px;
	height: 16px;
}
